<html>
    <head>
        <style>
            .container {
                margin-top: 150px;
                text-align: center;
            }
            #canvas { 
                border: 2px dashed green; 
            }
        </style>
    </head>
    <body>
        <div class="container">
            <canvas id="canvas" width="360px" height="360px"></canvas>
        </div>
    </body>
    <script>
        
        let canvas = document.getElementById("canvas");
        
        let context = canvas.getContext("2d");
        
        const unit = Math.PI / 180.0;
        
        const areaWidth = 360, areaHeight = 360;
        
        const x = areaWidth / 2, y = areaHeight / 2, r = 50, w = 10;
        
        const lineColor = "#0066FF";
        
        function lineSector(saxis, eaxis, offset) {
            context.beginPath();
            context.arc(x, y, r, (saxis + offset) * unit, (eaxis + offset) * unit);
            context.lineWidth = w;
            context.strokeStyle = lineColor;
            context.stroke();          
        }
        
        function circle() {
            context.beginPath();
            context.arc(x, y, r + r * 0.5, 0, Math.PI * 2, true);
            context.fillStyle = "#999"
            context.fill();          
        }        
        
        function cleanAll() {
            context.clearRect(0, 0, areaWidth, areaHeight);
        }
        
        function easeInOut(t, b = 0, c = 330, d = 330) {  
            if(t == 0) return b;
            if(t == d) return b + c;
            if((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
            return c / 2 * (-Math.pow(2, -10 * (t - 1)) + 2) + b;
        }  

        window.onload = () => {
            
            let frame = 0, saxis = 0, eaxis = 0, step = 0;
            
            const timer = setInterval(() => {
                
                cleanAll(); 
                
                circle();
                
                if(step == 0) lineSector(saxis, easeInOut(eaxis), frame); 
                
                if(step == 1) lineSector(easeInOut(saxis), eaxis, frame); 
                    
                if(saxis == 0 && eaxis == 330) {
                    step = 1;
                } else if(saxis == 330 && eaxis == 330) {
                    step = 0;
                    saxis = eaxis = 0;
                }
               
                if(step == 0) { eaxis += 1; } else if(step == 1) { saxis += 1; } 
                
                frame += 1;
                
            }, 1);
        };
        
    </script>
</html>
    